<template>
	<view class="bac-col-fa min-h-100">
		<!-- 加载中蒙版 -->
		<uni-transition mode-class="fade" :duration="500" :show="!loadStatus" custom-class="vague-bg-9 mask-load">
		</uni-transition>
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<custom-navber :top="42" :title="'参加的活动'"></custom-navber>
		<!-- #endif -->
		<view :style="{paddingTop:menuObject.top + menuObject.height + 'px'}">
			<v-tabs :fixed="true" :scroll="false" :pills="true" bgColor="#ffffff00" pillsColor="#ffffff00"
				fontSize="30rpx" activeFontSize="32rpx" lineHeight="40rpx"
				activeColor="linear-gradient(to right, #1e1e1e, #1e1e1e)"
				color="linear-gradient(to right, #616161, #616161)" bold lineColor="#14cc60" v-model="current"
				:tabs="tabs"></v-tabs>
		</view>
		<view class="ping-20">
			<!-- 如果活动列表为空 -->
			<view v-if="signupData.length == 0 || filteredSignupData.length == 0" class="activity-empty-box">
				<image class="activity-empty-image"
					src="https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/activity-mepty.png"
					mode="scaleToFill" />
				<view class="fs-28 fw-600">暂无活动</view>
			</view>
			<view v-else>
				<view class="bac-col-f br-20 ping-20" :class="index != signupData.length - 1?'mb-20':''"
					v-for="(item,index) in filteredSignupData" :key="index"
					@click="$NavigateTo(`/pages/detail/detail?id=${item.activity_id}`)">
					<view class="flex-dir-row ali-item-cen ">
						<view class="img-190 pos-rela">
							<image class="br-20 img-190" :src="item.activity_info[0].imgs[0].src" mode="aspectFill">
							</image>
							<view class="pos-abso brtl-20 brbr-20  fs-22  ping-6-10" style="top: 0;left: 0;z-index: 2;"
								:class="item.activity_info[0].signup_start_time > Date.now()?'bac-col-fa col-0a2e365e':item.activity_info[0].signup_start_time < Date.now() && item.activity_info[0].signup_end_time > Date.now() ? 'bac-col-00b col-f' : item.activity_info[0].start_time < Date.now() && item.activity_info[0].end_time > Date.now() ? 'bac-col-ffd col-f' : item.activity_info[0].start_time > Date.now() ? 'bac-col-4e col-f' : 'bac-col-fa col-0a2e365e'">
								{{item.activity_info[0].signup_start_time > Date.now()?'未开启':item.activity_info[0].signup_start_time < Date.now() && item.activity_info[0].signup_end_time > Date.now() ? '报名中' : item.activity_info[0].start_time < Date.now() && item.activity_info[0].end_time > Date.now() ? '进行中' : item.activity_info[0].start_time > Date.now() ? '待进行' : '已结束'}}
							</view>
						</view>
						<view class="fs-24 flex-dir-col flex-x-bet ml-20" style="height: 180rpx;">
							<view class="fs-34 fw-600 text-element-1">{{item.activity_info[0].name}}</view>
							<view class="flex-dir-row ali-item-cen mt-10">
								<view class="text-tips bac-col-00b" v-for="(tag,i) in item.activity_info[0].tags"
									:key="i">
									{{tag}}
								</view>
							</view>
							<view class="flex-dir-row ali-item-cen col-b1">
								<view class="iconfont ic-shijianxuanzeqi mr-10"></view>
								<view
									v-if="item.activity_info[0].signup_start_time < Date.now() && item.activity_info[0].signup_end_time > Date.now()">
									{{$formatDate(item.activity_info[0].signup_start_time)}} -
									{{$formatDate(item.activity_info[0].signup_end_time)}}
								</view>
								<view v-else>{{$formatDate(item.activity_info[0].start_time)}} -
									{{$formatDate(item.activity_info[0].end_time)}}
								</view>
							</view>
							<view class="flex-dir-row ali-item-cen col-b1">
								<view class="iconfont ic-weizhi mr-10"></view>
								<view class="text-element-1">{{item.activity_info[0].location}}</view>
							</view>
						</view>
					</view>
					<view class="flex-dir-row flex-x-bet ali-item-cen pt-20 mt-20 bor-top-f3">
						<view class="flex-dir-row ali-item-cen  col-b1">
							<view class="flex-dir-row ali-item-cen">
								<image v-for="(user,i) in item.user_info.slice(0,3)" :key="i"
									:src="user.user_avatar || 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg'"
									:style="{marginLeft: i == 0?0:'-20rpx'}" mode="aspectFill" class="img-50 br-200">
								</image>
							</view>
							<view class="ml-10 fs-24">{{item.user_info.length}}人报名</view>
						</view>
						<view class="flex-dir-row flex-r-end">
							<view class="fs-26 br-200 text-ali-c fw-600 btn-bg">
								<view class="gradient-text">预览</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mt-20 w-100 flex-center mb-20 text-ali-c flex-dir-row ali-item-cen">
					<image src="/static/logo.png" class="bot-logo"></image>
					<image src="/static/name.png" class="bot-name" mode="scaleToFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				tabs: ['全部', '进行中', '报名中', '已结束'],
				signupData: [], // 我的报名数据
				loadStatus: false, // 加载状态
				current: 0 // 当前选中的tab
			}
		},
		computed: {
			filteredSignupData() {
				const now = Date.now(); // 缓存当前时间戳
				return this.signupData.filter(item => {
					const activity = item.activity_info[0]; // 缓存活动信息
					switch(this.current) {
						case 0: return true;
						case 1: return activity.start_time < now && activity.end_time > now;
						case 2: return activity.signup_start_time < now && activity.signup_end_time > now;
						case 3: return activity.end_time < now;
						default: return true;
					}
				});
			}
		},
		onLoad() {
			// 查询报名表获取我参加的活动
			this.getMySignupData();
		},
		methods: {
			getMySignupData() {
				this.loadStatus = false;
				this.$Route('get-private-data').getMySignUpData().then((res) => {
					this.signupData = res.data;
					this.loadStatus = true;
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					let {
						code,
						msg
					} = this.$parseError(err); // 调用公共解析方法
					this.$Toast(msg);
				});
			}

		}
	}
</script>

<style lang="scss">
	.img-50 {
		width: 50rpx;
		height: 50rpx;
		border: 4rpx solid #ffffff;
	}

	.img-190 {
		width: 190rpx;
		height: 190rpx;
	}


	.text-tips {
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 20rpx;
		margin-right: 10rpx;
	}
</style>